<!DOCTYPE html>
<html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mdapi2html - Markdown转HTML工具 API文档</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2980b9;
            --text-color: #333;
            --bg-color: #f9f9f9;
            --code-bg: #f0f0f0;
            --border-color: #ddd;
            --success-color: #2ecc71;
            --warning-color: #f39c12;
            --error-color: #e74c3c;
            --hover-shadow: 0 8px 16px rgba(0,0,0,0.1);
            --active-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        @media (prefers-color-scheme: dark) {
            :root {
                --primary-color: #5dade2;
                --secondary-color: #3498db;
                --text-color: #ecf0f1;
                --bg-color: #2c3e50;
                --code-bg: #34495e;
                --border-color: #7f8c8d;
                --hover-shadow: 0 8px 16px rgba(0,0,0,0.3);
                --active-shadow: 0 4px 8px rgba(0,0,0,0.4);
            }
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--bg-color);
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            margin: 15px 0;
            display: block;
        }

        img:hover {
            transform: scale(1.02);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }

        .image-container {
            text-align: center;
            margin: 20px 0;
        }

        .image-caption {
            font-style: italic;
            color: #666;
            margin-top: 8px;
            font-size: 0.9em;
        }
        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(0,0,0,0.1);
            padding: 5px 10px;
            border-radius: 5px 5px 0 0;
            font-size: 0.8em;
        }
        
        .code-language {
            color: var(--text-color);
            opacity: 0.8;
            font-weight: bold;
        }
        
        .copy-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 3px 8px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 0.7em;
            transition: all 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .copy-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--hover-shadow);
        }
        
        .copy-btn:active {
            transform: translateY(0);
            box-shadow: var(--active-shadow);
        }

        /* 优化代码字体 */
        pre, code, .highlight {
            font-family: 'Fira Code', 'Consolas', 'Monaco', 'Andale Mono', monospace;
            font-size: 0.95em;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        pre {
            padding: 15px;
            overflow-x: auto;
            border-radius: 0 0 5px 5px;
            border-left: 4px solid var(--primary-color);
            tab-size: 4;
            background-color: var(--code-bg);
            margin: 0;
        }
        
        /* 优化代码高亮区域 */
        .highlight {
            background-color: var(--code-bg);
            border-radius: 0 0 5px 5px;
            padding: 0;
            margin: 0;
        }
        
        /* 优化代码容器 */
        .code-container {
            position: relative;
            margin: 20px 0;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            background-color: var(--code-bg);
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        
        .code-container:hover {
            transform: translateY(-3px);
            box-shadow: var(--hover-shadow);
        }
        
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background-color: var(--primary-color);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            z-index: 100;
            animation: pulse 2s infinite;
        }
        
        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }
        
        .back-to-top:hover {
            transform: scale(1.1);
            animation: none;
        }
        
        h1, h2, h3 {
            color: var(--primary-color);
            margin-top: 1.5em;
            transition: all 0.3s ease;
        }
        
        h1:hover, h2:hover, h3:hover {
            transform: translateX(5px);
        }
        
        h1 {
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 10px;
        }
        
        code {
            font-family: 'Consolas', 'Courier New', monospace;
            background-color: var(--code-bg);
            padding: 2px 5px;
            border-radius: 3px;
            transition: all 0.2s;
        }
        
        code:hover {
            background-color: rgba(0,0,0,0.1);
        }
        
        .green {
            background-color: #e8f8f5;
            border-left: 4px solid var(--success-color);
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
            transition: all 0.3s ease;
        }
        
        .green:hover {
            transform: translateX(5px);
        }
        
        .orange {
            background-color: #fff8e6;
            border-left: 4px solid var(--warning-color);
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
            transition: all 0.3s ease;
        }
        
        .orange:hover {
            transform: translateX(5px);
        }
        
        .red {
            background-color: #ffebee;
            border-left: 4px solid var(--error-color);
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
            transition: all 0.3s ease;
        }
        
        .red:hover {
            transform: translateX(5px);
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }
        
        th, td {
            border: 1px solid var(--border-color);
            padding: 8px 12px;
            text-align: left;
            transition: all 0.2s;
        }
        
        tr:hover td {
            background-color: rgba(0,0,0,0.05);
            transform: translateY(-1px);
        }
        
        th {
            background-color: var(--primary-color);
            color: white;
        }
        
        .feature-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        
        .feature-item {
            background-color: rgba(255,255,255,0.1);
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            transform: translateY(0);
            cursor: pointer;
            border: 1px solid rgba(0,0,0,0.05);
        }
        
        .feature-item:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: var(--hover-shadow);
            background-color: rgba(255,255,255,0.15);
            z-index: 2;
        }
        
        .feature-item:active {
            transform: translateY(-2px) scale(1.01);
            box-shadow: var(--active-shadow);
        }
        
        ul {
            padding-left: 20px;
        }
        
        li {
            margin: 5px 0;
            transition: all 0.2s;
        }
        
        li:hover {
            transform: translateX(5px);
        }
        
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .feature-list {
                grid-template-columns: 1fr;
            }
            
            .back-to-top {
                width: 40px;
                height: 40px;
                bottom: 20px;
                right: 20px;
            }
        }
        
        pre { line-height: 125%; }
        td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
        span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
        td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
        span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
        .highlight .hll { background-color: #ffffcc }
        .highlight { background: #f8f8f8; }
        .highlight .c { color: #3D7B7B; font-style: italic }
        .highlight .err { border: 1px solid #F00 }
        .highlight .k { color: #008000; font-weight: bold }
        .highlight .o { color: #666 }
        .highlight .ch { color: #3D7B7B; font-style: italic }
        .highlight .cm { color: #3D7B7B; font-style: italic }
        .highlight .cp { color: #9C6500 }
        .highlight .cpf { color: #3D7B7B; font-style: italic }
        .highlight .c1 { color: #3D7B7B; font-style: italic }
        .highlight .cs { color: #3D7B7B; font-style: italic }
        .highlight .gd { color: #A00000 }
        .highlight .ge { font-style: italic }
        .highlight .ges { font-weight: bold; font-style: italic }
        .highlight .gr { color: #E40000 }
        .highlight .gh { color: #000080; font-weight: bold }
        .highlight .gi { color: #008400 }
        .highlight .go { color: #717171 }
        .highlight .gp { color: #000080; font-weight: bold }
        .highlight .gs { font-weight: bold }
        .highlight .gu { color: #800080; font-weight: bold }
        .highlight .gt { color: #04D }
        .highlight .kc { color: #008000; font-weight: bold }
        .highlight .kd { color: #008000; font-weight: bold }
        .highlight .kn { color: #008000; font-weight: bold }
        .highlight .kp { color: #008000 }
        .highlight .kr { color: #008000; font-weight: bold }
        .highlight .kt { color: #B00040 }
        .highlight .m { color: #666 }
        .highlight .s { color: #BA2121 }
        .highlight .na { color: #687822 }
        .highlight .nb { color: #008000 }
        .highlight .nc { color: #00F; font-weight: bold }
        .highlight .no { color: #800 }
        .highlight .nd { color: #A2F }
        .highlight .ni { color: #717171; font-weight: bold }
        .highlight .ne { color: #CB3F38; font-weight: bold }
        .highlight .nf { color: #00F }
        .highlight .nl { color: #767600 }
        .highlight .nn { color: #00F; font-weight: bold }
        .highlight .nt { color: #008000; font-weight: bold }
        .highlight .nv { color: #19177C }
        .highlight .ow { color: #A2F; font-weight: bold }
        .highlight .w { color: #BBB }
        .highlight .mb { color: #666 }
        .highlight .mf { color: #666 }
        .highlight .mh { color: #666 }
        .highlight .mi { color: #666 }
        .highlight .mo { color: #666 }
        .highlight .sa { color: #BA2121 }
        .highlight .sb { color: #BA2121 }
        .highlight .sc { color: #BA2121 }
        .highlight .dl { color: #BA2121 }
        .highlight .sd { color: #BA2121; font-style: italic }
        .highlight .s2 { color: #BA2121 }
        .highlight .se { color: #AA5D1F; font-weight: bold }
        .highlight .sh { color: #BA2121 }
        .highlight .si { color: #A45A77; font-weight: bold }
        .highlight .sx { color: #008000 }
        .highlight .sr { color: #A45A77 }
        .highlight .s1 { color: #BA2121 }
        .highlight .ss { color: #19177C }
        .highlight .bp { color: #008000 }
        .highlight .fm { color: #00F }
        .highlight .vc { color: #19177C }
        .highlight .vg { color: #19177C }
        .highlight .vi { color: #19177C }
        .highlight .vm { color: #19177C }
        .highlight .il { color: #666 }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body>
    <h1>mdapi2html - Markdown转HTML工具 API文档</h1>
<h2>概述</h2>
<p>mdapi2html 是一个专业的Markdown转换工具，专为API文档设计。它支持自定义区块语法、代码高亮和响应式布局，可将技术文档转换为美观的HTML页面。</p>
<div class="code-container">
    <div class="code-header">
        <span class="code-language">python</span>
        <button class="copy-btn" onmouseenter="animateButton(this)" onclick="copyCode('code-781d55bb', this)">复制</button>
    </div>
    <div class="highlight"><pre><span></span><span class="c1"># 核心转换函数</span>
<span class="k">def</span><span class="w"> </span><span class="nf">convert_markdown_to_html</span><span class="p">(</span><span class="n">input_file</span><span class="p">,</span> <span class="n">output_file</span><span class="p">):</span>
    <span class="c1"># 读取Markdown内容</span>
    <span class="c1"># 处理自定义区块</span>
    <span class="c1"># 生成HTML文件</span>
</pre></div>

    <pre id="code-781d55bb" style="display: none;"># 核心转换函数
def convert_markdown_to_html(input_file, output_file):
    # 读取Markdown内容
    # 处理自定义区块
    # 生成HTML文件</pre>
</div>

<h2>安装指南</h2>
<div class="green">
<p><strong>环境要求</strong><br>
Python 3.6+ 及以下依赖库：</p>
</div>

<div class="feature-list">
<div class="feature-item" onmouseover="animateFeature(this)" onmouseout="resetFeature(this)" style="">
<p><code>markdown</code><br>
Markdown解析引擎<br>
<code>pip install markdown</code></p>
</div>
<div class="feature-item" onmouseover="animateFeature(this)" onmouseout="resetFeature(this)" style="">
<p><code>Pygments</code><br>
代码高亮支持<br>
<code>pip install pygments</code></p>
</div>
<div class="feature-item" onmouseover="animateFeature(this)" onmouseout="resetFeature(this)" style="">
<p><code>beautifulsoup4</code><br>
HTML处理工具<br>
<code>pip install beautifulsoup4</code></p>
</div>
</div>

<div class="orange">
<p><strong>一键安装命令</strong>  </p>
<div class="code-container">
    <div class="code-header">
        <span class="code-language">bash</span>
        <button class="copy-btn" onmouseenter="animateButton(this)" onclick="copyCode('code-8bc91c20', this)">复制</button>
    </div>
    <div class="highlight"><pre><span></span>pip<span class="w"> </span>install<span class="w"> </span>markdown<span class="w"> </span>pygments<span class="w"> </span>beautifulsoup4
</pre></div>

    <pre id="code-8bc91c20" style="display: none;">pip install markdown pygments beautifulsoup4</pre>
</div>
</div>

<h2>功能特性</h2>
<div class="feature-list">
<div class="feature-item" onmouseover="animateFeature(this)" onmouseout="resetFeature(this)">
<p><strong>自定义区块系统</strong><br>
支持6种预定义区块类型</p>
</div>
<div class="feature-item" onmouseover="animateFeature(this)" onmouseout="resetFeature(this)" style="">
<p><strong>多语言代码高亮</strong><br>
自动识别50+编程语言</p>
</div>
<div class="feature-item" onmouseover="animateFeature(this)" onmouseout="resetFeature(this)" style="">
<p><strong>响应式设计</strong><br>
完美适配桌面/平板/手机</p>
</div>
<div class="feature-item" onmouseover="animateFeature(this)" onmouseout="resetFeature(this)">
<p><strong>智能暗色模式</strong><br>
根据系统设置自动切换</p>
</div>
<div class="feature-item" onmouseover="animateFeature(this)" onmouseout="resetFeature(this)" style="">
<p><strong>交互式元素</strong><br>
悬停动画 + 点击反馈</p>
</div>
<div class="feature-item" onmouseover="animateFeature(this)" onmouseout="resetFeature(this)" style="">
<p><strong>一键复制代码</strong><br>
便捷的代码复制功能</p>
</div>
</div>

<h2>使用方式</h2>
<h3>命令行模式</h3>
<div class="code-container">
    <div class="code-header">
        <span class="code-language">bash</span>
        <button class="copy-btn" onmouseenter="animateButton(this)" onclick="copyCode('code-893bae2d', this)">复制</button>
    </div>
    <div class="highlight"><pre><span></span><span class="c1"># 基本用法</span>
python<span class="w"> </span>mdapi2html.py<span class="w"> </span>input.md<span class="w"> </span>output.html

<span class="c1"># 帮助信息</span>
python<span class="w"> </span>mdapi2html.py<span class="w"> </span>-h
</pre></div>

    <pre id="code-893bae2d" style="display: none;"># 基本用法
python mdapi2html.py input.md output.html

# 帮助信息
python mdapi2html.py -h</pre>
</div>

<div class="orange">
<p><strong>参数说明</strong>  </p>
<table>
<thead>
<tr>
<th>参数</th>
<th>必填</th>
<th>说明</th>
<th>示例值</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>input</code></td>
<td>是</td>
<td>输入Markdown文件路径</td>
<td><code>api_docs.md</code></td>
</tr>
<tr>
<td><code>output</code></td>
<td>是</td>
<td>输出HTML文件路径</td>
<td><code>index.html</code></td>
</tr>
</tbody>
</table>
</div>

<h3>交互式模式</h3>
<div class="code-container">
    <div class="code-header">
        <span class="code-language">bash</span>
        <button class="copy-btn" onmouseenter="animateButton(this)" onclick="copyCode('code-e7ee8056', this)">复制</button>
    </div>
    <div class="highlight"><pre><span></span><span class="c1"># 启动交互式会话</span>
python<span class="w"> </span>mdapi2html.py

<span class="c1"># 系统将提示输入路径</span>
请输入输入文件路径<span class="o">(</span>如:<span class="w"> </span>input.md<span class="o">)</span>:<span class="w"> </span>api.md
请输入输出文件路径<span class="o">(</span>如:<span class="w"> </span>output.html<span class="o">)</span>:<span class="w"> </span>documentation.html
</pre></div>

    <pre id="code-e7ee8056" style="display: none;"># 启动交互式会话
python mdapi2html.py

# 系统将提示输入路径
请输入输入文件路径(如: input.md): api.md
请输入输出文件路径(如: output.html): documentation.html</pre>
</div>

<div class="green">
<p><strong>使用场景建议</strong><br>
- 命令行模式：适合自动化脚本和持续集成<br>
- 交互式模式：适合临时转换和快速测试</p>
</div>

<h2>自定义区块语法</h2>
<h3>基础区块类型</h3>
<div class="code-container">
    <div class="code-header">
        <span class="code-language">markdown</span>
        <button class="copy-btn" onmouseenter="animateButton(this)" onclick="copyCode('code-9221051a', this)">复制</button>
    </div>
    <div class="highlight"><pre><span></span><span class="gu">###block_green_start</span>
绿色区块 - 用于提示/成功信息
<span class="gu">###block_green_end</span>

<span class="gu">###block_orange_start</span>
橙色区块 - 用于警告/注意事项
<span class="gu">###block_orange_end</span>

<span class="gu">###block_red_start</span>
红色区块 - 用于错误/重要警告
<span class="gu">###block_red_end</span>
</pre></div>

    <pre id="code-9221051a" style="display: none;"><div class="green">
<p>绿色区块 - 用于提示/成功信息</p>
</div>

<div class="orange">
<p>橙色区块 - 用于警告/注意事项</p>
</div>

<div class="red">
<p>红色区块 - 用于错误/重要警告</p>
</div></pre>
</div>

<h3>列表区块</h3>
<div class="code-container">
    <div class="code-header">
        <span class="code-language">markdown</span>
        <button class="copy-btn" onmouseenter="animateButton(this)" onclick="copyCode('code-3cd3c30d', this)">复制</button>
    </div>
    <div class="highlight"><pre><span></span><span class="gu">###block_list_start</span>
<span class="gu">###block_item_start</span>
特性项 1 - 卡片式布局
<span class="gu">###block_item_end</span>
<span class="gu">###block_item_start</span>
特性项 2 - 悬停动画效果
<span class="gu">###block_item_end</span>
<span class="gu">###block_list_end</span>
</pre></div>

    <pre id="code-3cd3c30d" style="display: none;"><div class="feature-list">
<div class="feature-item" onmouseover="animateFeature(this)" onmouseout="resetFeature(this)">
<p>特性项 1 - 卡片式布局</p>
</div>
<div class="feature-item" onmouseover="animateFeature(this)" onmouseout="resetFeature(this)">
<p>特性项 2 - 悬停动画效果</p>
</div>
</div></pre>
</div>

<h3>无序列表区块</h3>
<div class="code-container">
    <div class="code-header">
        <span class="code-language">markdown</span>
        <button class="copy-btn" onmouseenter="animateButton(this)" onclick="copyCode('code-cea0287a', this)">复制</button>
    </div>
    <div class="highlight"><pre><span></span><span class="gu">###block_ul_start</span>
<span class="k">-</span><span class="w"> </span>项目 1
<span class="k">-</span><span class="w"> </span>项目 2
<span class="k">-</span><span class="w"> </span>项目 3
<span class="gu">###block_ul_end</span>
</pre></div>

    <pre id="code-cea0287a" style="display: none;"><ul>
<li>项目 1</li><li>项目 2</li><li>项目 3</li>
</ul></pre>
</div>

<h2>核心API</h2>
<h3><code>process_custom_blocks(md_content)</code></h3>
<p>处理所有自定义区块的入口函数</p>
<p><strong>参数</strong><br>
- <code>md_content</code>: 原始Markdown文本</p>
<p><strong>返回</strong><br>
处理后的HTML内容</p>
<div class="code-container">
    <div class="code-header">
        <span class="code-language">python</span>
        <button class="copy-btn" onmouseenter="animateButton(this)" onclick="copyCode('code-09017cc3', this)">复制</button>
    </div>
    <div class="highlight"><pre><span></span><span class="k">def</span><span class="w"> </span><span class="nf">process_custom_blocks</span><span class="p">(</span><span class="n">md_content</span><span class="p">):</span>
    <span class="c1"># 递归处理所有区块类型</span>
    <span class="c1"># 提取并保留代码块</span>
    <span class="c1"># 转换Markdown内容</span>
</pre></div>

    <pre id="code-09017cc3" style="display: none;">def process_custom_blocks(md_content):
    # 递归处理所有区块类型
    # 提取并保留代码块
    # 转换Markdown内容</pre>
</div>

<h3><code>generate_code_html(lang, highlighted_code, raw_code)</code></h3>
<p>生成带复制功能的代码块HTML</p>
<p><strong>参数</strong><br>
- <code>lang</code>: 编程语言名称
- <code>highlighted_code</code>: Pygments高亮后的代码
- <code>raw_code</code>: 原始代码文本</p>
<p><strong>返回</strong><br>
(代码块HTML, 元素ID)</p>
<div class="code-container">
    <div class="code-header">
        <span class="code-language">python</span>
        <button class="copy-btn" onmouseenter="animateButton(this)" onclick="copyCode('code-7068669e', this)" style="transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px;">复制</button>
    </div>
    <div class="highlight"><pre><span></span><span class="k">def</span><span class="w"> </span><span class="nf">generate_code_html</span><span class="p">(</span><span class="n">lang</span><span class="p">,</span> <span class="n">highlighted_code</span><span class="p">,</span> <span class="n">raw_code</span><span class="p">):</span>
    <span class="n">code_id</span> <span class="o">=</span> <span class="s2">"code-"</span> <span class="o">+</span> <span class="nb">str</span><span class="p">(</span><span class="n">uuid</span><span class="o">.</span><span class="n">uuid4</span><span class="p">())[:</span><span class="mi">8</span><span class="p">]</span>
    <span class="c1"># 构建包含复制按钮的HTML结构</span>
</pre></div>

    <pre id="code-7068669e" style="display: none;">def generate_code_html(lang, highlighted_code, raw_code):
    code_id = "code-" + str(uuid.uuid4())[:8]
    # 构建包含复制按钮的HTML结构</pre>
</div>

<h3><code>generate_html_template(content, title)</code></h3>
<p>生成完整的HTML文档框架</p>
<p><strong>参数</strong><br>
- <code>content</code>: 主体内容HTML
- <code>title</code>: 页面标题</p>
<p><strong>返回</strong><br>
完整的HTML文档字符串</p>
<div class="code-container">
    <div class="code-header">
        <span class="code-language">python</span>
        <button class="copy-btn" onmouseenter="animateButton(this)" onclick="copyCode('code-c9fa18cb', this)">复制</button>
    </div>
    <div class="highlight"><pre><span></span><span class="k">def</span><span class="w"> </span><span class="nf">generate_html_template</span><span class="p">(</span><span class="n">content</span><span class="p">,</span> <span class="n">title</span><span class="o">=</span><span class="s2">"API文档"</span><span class="p">):</span>
    <span class="c1"># 包含CSS样式和JavaScript</span>
    <span class="c1"># 支持亮色/暗色模式</span>
    <span class="c1"># 添加返回顶部按钮</span>
</pre></div>

    <pre id="code-c9fa18cb" style="display: none;">def generate_html_template(content, title="API文档"):
    # 包含CSS样式和JavaScript
    # 支持亮色/暗色模式
    # 添加返回顶部按钮</pre>
</div>

<h2>输出特性</h2>
<div class="feature-list">
<div class="feature-item" onmouseover="animateFeature(this)" onmouseout="resetFeature(this)" style="">
<p><strong>代码块效果</strong><br>
- 语言标识 + 复制按钮<br>
- 悬停上浮效果<br>
- 左侧高亮边框</p>
</div>
<div class="feature-item" onmouseover="animateFeature(this)" onmouseout="resetFeature(this)" style="">
<p><strong>响应式布局</strong><br>
- 桌面端：多列展示<br>
- 移动端：单列优化</p>
</div>
<div class="feature-item" onmouseover="animateFeature(this)" onmouseout="resetFeature(this)" style="">
<p><strong>交互元素</strong><br>
- 平滑滚动返回顶部<br>
- 表格行悬停高亮<br>
- 标题悬停微移</p>
</div>
</div>

<h2>示例输出</h2>
<div class="code-container">
    <div class="code-header">
        <span class="code-language">html</span>
        <button class="copy-btn" onmouseenter="animateButton(this)" onclick="copyCode('code-af469b57', this)">复制</button>
    </div>
    <div class="highlight"><pre><span></span><span class="cm">&lt;!-- 生成的代码块结构 --&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"code-container"</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"code-header"</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"code-language"</span><span class="p">&gt;</span>python<span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"copy-btn"</span><span class="p">&gt;</span>复制<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"highlight"</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">pre</span> <span class="na">id</span><span class="o">=</span><span class="s">"code-123abc"</span> <span class="na">style</span><span class="o">=</span><span class="s">"display: none;"</span><span class="p">&gt;</span>...<span class="p">&lt;/</span><span class="nt">pre</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</pre></div>

    <pre id="code-af469b57" style="display: none;">&lt;!-- 生成的代码块结构 --&gt;
&lt;div class="code-container"&gt;
    &lt;div class="code-header"&gt;
        &lt;span class="code-language"&gt;python&lt;/span&gt;
        &lt;button class="copy-btn"&gt;复制&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="highlight"&gt;...&lt;/div&gt;
    &lt;pre id="code-123abc" style="display: none;"&gt;...&lt;/pre&gt;
&lt;/div&gt;</pre>
</div>

<div class="orange">
<p><strong>样式特点</strong><br>
所有视觉元素都包含平滑过渡效果，包括：
- 按钮悬停动画
- 卡片悬停缩放
- 颜色模式切换</p>
</div>

<h2>注意事项</h2>
<div class="red">
<p><strong>重要限制</strong>  </p>
<ul>
<li>自定义区块标记必须独占一行</li><li>嵌套区块不支持错位</li><li>代码块内不能包含区块标记</li><li>markdown表格前后需要有空行</li><li>输入文件必须使用UTF-8编码</li><li>输出文件会覆盖同名文件</li><li>转换大文件可能需要一定时间</li>
</ul>
</div>
<h2>故障排除</h2>
<table>
<thead>
<tr>
<th>问题现象</th>
<th>解决方案</th>
</tr>
</thead>
<tbody>
<tr>
<td>缺少依赖库</td>
<td>运行 <code>pip install markdown pygments beautifulsoup4</code></td>
</tr>
<tr>
<td>区块未正确转换</td>
<td>检查区块标记是否独占一行</td>
</tr>
<tr>
<td>代码高亮失效</td>
<td>确认语言名称是否正确</td>
</tr>
<tr>
<td>输出文件无样式</td>
<td>检查浏览器控制台错误</td>
</tr>
</tbody>
</table>
<div class="code-container">
    <div class="code-header">
        <span class="code-language">bash</span>
        <button class="copy-btn" onmouseenter="animateButton(this)" onclick="copyCode('code-75fbd932', this)">复制</button>
    </div>
    <div class="highlight"><pre><span></span><span class="c1"># 验证安装的命令</span>
python<span class="w"> </span>-c<span class="w"> </span><span class="s2">"import markdown, pygments, bs4; print('所有依赖已安装')"</span>
</pre></div>

    <pre id="code-75fbd932" style="display: none;"># 验证安装的命令
python -c "import markdown, pygments, bs4; print('所有依赖已安装')"</pre>
</div>

<h2>总结</h2>
<p>mdapi2html 提供了一套完整的Markdown转HTML解决方案，特别适合技术文档和API参考手册的生成。通过自定义区块语法和精心设计的UI组件，用户可以轻松创建专业的文档网站。</p>
<div class="code-container">
    <div class="code-header">
        <span class="code-language">python</span>
        <button class="copy-btn" onmouseenter="animateButton(this)" onclick="copyCode('code-89ef755b', this)">复制</button>
    </div>
    <div class="highlight"><pre><span></span><span class="k">if</span> <span class="vm">__name__</span> <span class="o">==</span> <span class="s2">"__main__"</span><span class="p">:</span>
    <span class="c1"># 双模式入口</span>
    <span class="c1"># 支持命令行参数和交互式输入</span>
    <span class="c1"># 执行核心转换流程</span>
</pre></div>

    <pre id="code-89ef755b" style="display: none;">if __name__ == "__main__":
    # 双模式入口
    # 支持命令行参数和交互式输入
    # 执行核心转换流程</pre>
</div>
    
    <div class="back-to-top show" id="backToTop" onmouseover="animateBackToTop(this)" onmouseout="resetBackToTop(this)" style="">↑</div>
    
    <script>
        const backToTopBtn = document.getElementById('backToTop');
        
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                backToTopBtn.classList.add('show');
            } else {
                backToTopBtn.classList.remove('show');
            }
        });
        
        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        function copyCode(id, btn) {
            const codeElement = document.getElementById(id);
            const textArea = document.createElement('textarea');
            textArea.value = codeElement.textContent;
            document.body.appendChild(textArea);
            textArea.select();
            
            try {
                const successful = document.execCommand('copy');
                if(successful) {
                    // 添加动画效果
                    btn.textContent = '已复制!';
                    btn.style.backgroundColor = '#2ecc71';
                    setTimeout(() => {
                        btn.textContent = '复制';
                        btn.style.backgroundColor = '';
                        // 修复：重置位置和阴影
                        btn.style.transform = '';
                        btn.style.boxShadow = '';
                    }, 2000);
                }
            } catch(err) {
                console.error('复制失败:', err);
            }
            
            document.body.removeChild(textArea);
        }
        
        // 动画效果函数
        function animateButton(btn) {
            btn.style.transform = 'translateY(-3px)';
            btn.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
        }
        
        function animateFeature(item) {
            item.style.transform = 'translateY(-5px) scale(1.02)';
            item.style.boxShadow = '0 8px 16px rgba(0,0,0,0.1)';
            item.style.zIndex = '2';
        }
        
        function resetFeature(item) {
            item.style.transform = '';
            item.style.boxShadow = '';
            item.style.zIndex = '';
        }
        
        function animateBackToTop(btn) {
            btn.style.transform = 'scale(1.1)';
            btn.style.backgroundColor = '#2ecc71';
        }
        
        function resetBackToTop(btn) {
            btn.style.transform = '';
            btn.style.backgroundColor = '';
        }
    </script>


</body></html>